import React from "react";
import { RouteComponentProps } from 'react-router';

type P = {} & RouteComponentProps

type S = {
    userName: string;
    password: string;
    [k: string]: string;
}

export default class Login extends React.Component<P, S> {
    constructor(props: P) {
        super(props)
        this.state = {
            userName: '',
            password: ''
        }
    }
    setInputValue = (e: React.ChangeEvent<HTMLInputElement>, type: string) => {
        if (!type) return
        this.setState({ [type]: e.target.value })
    }
    loginSubmit = () => {
        const { userName, password } = this.state
        if (!userName || !password) {
            console.log('账号或密码为空')
            return
        }
        localStorage.setItem('token', 'token-321321')
        // 路由跳转
        this.props.history.push('/')
    }
    render() {
        return (
            <div className="login_max">
                <p>
                    <input type="text" onChange={(e) => this.setInputValue(e, 'userName')} />
                </p>
                <p>
                    <input type="text" onChange={(e) => this.setInputValue(e, 'password')} />
                </p>
                <p>
                    <button onClick={this.loginSubmit}>登录</button>
                </p>
            </div>
        )
    }
}